<template>
	<view class="page">
		<view class="header">
			<!-- 搜索功能 -->
			<view class="uni-search-box">
				<uni-search-bar ref="searchBar" radius="100" cancelButton="none" disabled placeholder="搜索科室,医生 "/>
			</view>
		</view>
		<!-- 轮播图 -->
		<view class="uni-margin-wrap">
			<unicloud-db v-slot:default="{data, loading, error, options}" collection="opendb-banner">
				<view v-if="error">{{error.message}}</view>
				<view v-else>
					<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
						:duration="duration">
						<swiper-item v-for="(item, index) in data" :key="item._id">
							<view class="swiper-item">
								<image class="banner-image" :src="item.bannerfile.url" mode="aspectFill" :draggable="false" />
							</view>
						</swiper-item>
					</swiper>
				</view>
			</unicloud-db>
		</view>
		
		<view>
			<uni-card is-full>
				
			</uni-card>
	
			<uni-section title="" type="line">
				<view class="uni-padding-wrap uni-common-mt">
					<uni-segmented-control :current="current" :values="items" :style-type="styleType"
						:active-color="activeColor" @clickItem="onClickItem" />
				</view>
				<view class="content">
					<view v-if="current === 0"></view>
					<view v-if="current === 1"></view>
					<view v-if="current === 2"></view>
				</view>
			</uni-section>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
			items: ['预约挂号', '在线问诊', '报告查询'],
		}
	},
	methods: {
		onClickItem(e) {
			if (this.current !== e.currentIndex) {
				this.current = e.currentIndex;
			}
		},
		styleChange(e) {
			if (this.styleType !== e.detail.value) {
				this.styleType = e.detail.value;
			}
		},
		colorChange(e) {
			if (this.activeColor !== e.detail.value) {
				this.activeColor = e.detail.value;
			}
		},
	}
}
</script>

<style scoped>
view {
	display: flex;
	box-sizing: border-box;
	flex-direction: column;
}

.pages {
	background-color: #FFFFFF;
}

.header {
	display: flex;
	flex-direction: row;
	padding-left: 15px;
}

.locationName {
	display: flex;
	flex-direction: row;
	height: 50px;
	line-height: 50px;
	font-size: 12px;
}

.uni-search-box {
	background-color: #FFFFFF;
	height: 60px;
	width: 580rpx;
}

.uni-margin-wrap {
	margin-top: 5rpx;
}

.swiper {
	height: 500rpx;
}

.banner-image {
	width: 750rpx;
	height: 500rpx;
}

.example-body {
	flex-direction: row;
	padding: 0;
}

.uni-common-mt {
	margin-top: 30px;
}

.uni-padding-wrap {
	padding: 30px 30px;
}

.content {
	justify-content: center;
	align-items: center;
	height: 150px;
	text-align: center;
}

.content-text {
	font-size: 14px;
	color: #666;
}

.color-tag {
	width: 25px;
	height: 25px;
}

.uni-list {
	flex: 1;
}

.uni-list-item {
	flex: 1;
	flex-direction: row;
	background-color: #FFFFFF;
}

.uni-list-item__container {
	padding: 20px 20px;
	width: 100%;
	flex: 1;
	display: flex;
	box-sizing: border-box;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #eee;
}

.uni-list-item__content-title {
	font-size: 14px;
}
</style>